<template>
  <el-dialog
      v-model="dialogVisible"
      title="表单设置"
      width="400"
  >
    <div class="setting-form__list"  ref="list">
      <div class="setting-form__title">
        <span>显示</span>
        <span class="setting-form__name">名称</span>
      </div>
      <ul>
        <li v-for="item in colunm" :key="item.value_name">
          <el-tag class="tag" style="cursor: move;"><el-icon><DCaret /></el-icon></el-tag>
          <el-switch
              v-model="item.hide"
              active-color="#409EFF"
          >
          </el-switch>
          <span>{{item.name}} </span>
        </li>
      </ul>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import Sortable from 'sortablejs'
import {reactive, ref} from 'vue'
import { defineExpose,nextTick } from 'vue';
const dialogVisible = ref(false)

const list = ref(null);
const colunm = ref([])
const open = (value) => {
  dialogVisible.value = true
  colunm.value = value
  nextTick(()=>{
    colunm.value.length >0 && rowDrop()
  })

}
const rowDrop = () => {
  const tbody = list.value.querySelector('ul');
  Sortable.create(tbody, {    // 使用 Sortable.js 创建一个可拖拽排序的对象
    // 设置拖拽手柄（只允许通过类名为 '.move' 的元素开始拖拽）
    handle: ".tag",
    animation: 300,
    // 拖拽时被拖拽元素的额外样式类名
    ghostClass: "ghost",
    onEnd({ newIndex, oldIndex }) {//元素被拖拽的时候 会触发这个onEnd的方法
      console.log('被拖拽了')
      // 获取组件中存储待排序数据的数组
      const tableData = colunm.value
      // 从原数组中移除被拖拽的行，并获取这个行数据
      const currRow = colunm.value.splice(oldIndex, 1)[0]
      // 将移除的行数据插入新位置
      colunm.value.splice(newIndex, 0, currRow)
      console.log(colunm.value)
    }
  })
}

defineExpose({ open });
</script>

<style scoped lang="scss">
.setting-form__list{
  ul{

    li{
      display: flex;
      align-items: center;
      list-style: none;
      margin:10px 10px;
      .tag {
        margin-right:  10px;
      }
      .el-switch {
        margin-right:  30px;
      }
      span{
        margin-right:  30px;
      }
    }
  }
  .setting-form__title{
    margin-right: 68px;
    .setting-form__name{
      margin-left: 45px;
    }
  }
}
</style>
